<template>
	<div id="shopcarall">
		<van-row class="adminall">
			<van-col :span="4">共{{allnum}}件宝贝</van-col>
			<van-col :span="2" :offset="17" @click="delall">删除</van-col>
		</van-row>
		
		<div class="shopcardata">
			<van-swipe-cell v-for="item in shopcarall">
				<van-row class="shopcarone">
					<van-col :span="3" class="shopcarradios">
						<input type="checkbox" class="shopcarradio" v-model="isallone" @change="allone(item)" :value="item">
					</van-col>
					<van-col :span="7" class="shopcarimgs">
						<img :src="url+item.goods_img" class="shopcarimg">
					</van-col>
					<van-col :span="11" class="shopcarnames">
						<van-row class="shopcarname">
							{{item.goods_name}}
						</van-row>
						<van-row class="shopcarcontent">
							{{item.remark}}
						</van-row>
						<van-row class="shopcarprice">
							￥{{item.price}}
						</van-row>
					</van-col>
					<van-col :span="3" class="shopcarnums">
						<van-row class="shopcarquan">
							领券
						</van-row>
						<van-row class="shopcarnum">
							×1
						</van-row>
					</van-col>
				</van-row>
				
				<template #right>
					<van-button square text="找相似" id="samebutton" />
					<van-button square text="移入收藏夹" id="likebutton" />
					<van-button square text="删除" type="danger" id="deletebutton" @click="deleteone(item.id)"/>
				</template>
				
			</van-swipe-cell>
		</div>
		
		<van-row class="shopcarallone">
			<van-col :span="2" :offset="1" class="shopcarallradios">
				<input type="checkbox" class="shopcarallradio" v-model="isall" @click="all">
			</van-col>
			<van-col :span="3" class="shopcarallquan">
				全选
			</van-col>
			<van-col :span="11" class="shopcaralloneprice">￥{{price}}</van-col>
			<van-col :span="6" class="shopcarallbuttons">
				<button class="shopcarallbutton">结算</button>
			</van-col>
		</van-row>
	</div>
</template>

<script>
	export default
	{
		data()
		{
			return{
				// 用户
				id:'',
				
				allnum:'',
				// 全选
				isall:false,
				// 全选每一条
				isallone:[],
				
				shopcarall:[],
				
				url:'https://img.9lele.com',
				
				price:0,
				selected:[],
				isone:false
			}
		},
		created()
		{	
			// 我的id 我的购物车
			let user=JSON.parse(localStorage.getItem('username'))
			this.id=user.member_id
		},
		mounted()
		{
			// 获取购物车数据
			this.getshopcar()
		},
		methods:
		{
			// 单选
			allone(item)
			{	
				console.log(item)
				
				// 判断是不是全选
				if(this.isallone.length===this.shopcarall.length)
				{
					this.isall=true
				}
				else
				{
					this.isall=false
				}
			},
		
			// 全选
			all()
			{
				// isall为false 不全选 如果等于true 为空
				if(this.isall==true)
				{
					// 为空
					this.isallone=[];
					this.price=0
				}
				else
				{
					// 获取的数据给单选
					this.isallone=this.shopcarall
				
					this.priceall()
				}
			},
			
			// 获取购物车数据
			getshopcar()
			{
				let data=this.id
				
				this.$nextTick(function()
				{
					this.$store.dispatch("picture/vuexGetShopCar",this.id)
					.then((e)=>
					{
						this.shopcarall=e.data.data
						console.log(this.shopcarall,1111111111)
						this.allnum=this.shopcarall.length
					})
				})
			},
			
			// 删除单条数据
			deleteone(id)
			{
				this.$store.dispatch("picture/vuexDeleteShopCar",id)
				.then((e)=>
				{
					console.log('删除成功')
				})
			},
			
			// 全删
			delall()
			{
				this.$store.dispatch('picture/vuexAllDeleteShopCar',this.id)
				.then((e)=>
				{
					console.log(e)
				})
			},
			
			
			// 总价
			priceall()
			{
				this.shopcarall.map((v)=>
				{
					this.price+=v.price*1
				})
			}
		}
	}
</script>

<style>
	#shopcarall{
		width: 100%;
		height: 100%;
		background-color: white;
	}
	.shopcardata{
		width: 100%;
		height: 100%;
		margin-bottom: 130px;
		margin-top: 5px;
	}
	.shopcarone{
		width: 90%;
		height: 150px;
		box-shadow: 1px 1px 10px #ccc;
		margin-left: 5%;
		margin-top: 20px;
		border-radius: 10px;
	}
	.shopcarradios{
		line-height: 150px;
	}
	.shopcarradio{
		width: 25px;
		height: 25px;
	}
	.shopcarimgs{
		height: 150px;
	}
	.shopcarnames{
		height: 100%;
	}
	.shopcarname{
		width: 95%;
		height: 60px;
		font-size: 1.375rem;
		font-weight: bold;
		text-align: left;
		line-height: 70px;
		padding-left: 5%;
		
		/* 变成点 */
		white-space: nowrap;
		/* 多余的隐藏 */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.shopcarcontent{
		width: 95%;
		height: 40px;
		text-align: left;
		line-height: 40px;
		padding-left: 5%;
		color: #666;
		
		/* 变成点 */
		white-space: nowrap;
		/* 多余的隐藏 */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.shopcarprice{
		width: 95%;
		height: 50px;
		text-align: left;
		line-height: 50px;
		padding-left: 5%;
		color: #F02E2E;
		font-size: 1.375rem;
	}
	.shopcarquan{
		margin-top: 25px;
		color: #666;
	}
	.shopcarnum{
		width: 50%;
		height: 25px;
		line-height: 25px;
		border: solid 1px #333;
		border-radius: 8px;
		margin-left: 20%;
		margin-top: 60px;
		font-size: 1.125rem;
	}
	.shopcarimg{
		width: 150px;
		height: 148px;
		margin-top: 1px;
	}
	.shopcarallone{
		width: 100%;
		height: 70px;
		position: fixed;
		bottom:60px;
		background-color: white;
		/* margin-bottom: 50px; */
	}
	.shopcarallradios{
		height: 60px;
		text-align: left;
	}
	.shopcarallradio{
		width: 25px;
		height: 25px;
		margin-left: 20px;
		margin-top: 12px;
		border-radius: 50%;
	}
	.shopcarallquan{
		height: 50px;
		font-size: 20px;
		text-align: left;
		line-height: 50px;
		font-weight: bold;
	}
	.shopcarallbuttons{
		height: 50px;
	}
	.shopcarallbutton{
		width: 90%;
		height: 60px;
		margin-left: 10%;
		border: none;
		background-color: #1E1E1E;
		color: white;
		border-radius: 8px;
		font-size: 18px;
	}
	.shopcaralloneprice{
		height: 60px;
		color: red;
		text-align: right;
		font-size: 27px;
		line-height: 60px;
	}
	#samebutton{
		width: 50px;
		height: 100%;
  		background-color:#FFCE45;
		border-radius:10px;
		margin-right: -20px;
		z-index: 10;
		color: white;
		border: none;
		padding-left: 30px;
		padding-right: 30px;
	}
	#likebutton{
		width: 60px;
		height: 100%;
		background-color: #F16C2D;
		border-radius: 10px;
		margin-right: -20px;
		z-index: 9;
		padding-left: 40px;
		padding-right: 30px;
		color: white;
		border: none;
  	}
	#deletebutton{
		width: 60px;
		height: 100%;
		border-radius: 10px;
		background-color: #F03131;
		padding-left: 40px;
		padding-right: 30px;
		border: none;
  	}
</style>
